<template>
  <div style="padding-top:1.5rem;">
    <div>
      <TopNav title="ProfileDetailPage.grxx" show_left="true"></TopNav>
      <ul class="Personal_ul">
        <li>
          <a>
          <img src="../../static/icons/profile/p-head.png" alt="">
          <h3>{{ $t('ProfileDetailPage.tx') }}</h3>
          <img @click="handleClickHeadphoto"  v-if="hasHeadphotoLoaded" :src="user.headphoto?user.headphoto:defaultPhoto" alt="" class="Personal_ul_r_img">
        </a>
        </li>
        <li>
          <img src="../../static/icons/profile/p-phone.png" alt="">
          <h3>{{ $t('ProfileDetailPage.wdsjhm') }}</h3>
          <p>{{user.username}}</p>
        </li>
          <li>
            <a href="/#/bank" >
            <img src="../../static/icons/profile/p-bank.png" alt="">
            <h3>{{ $t('ProfileDetailPage.wdyxk') }}</h3>
            <p> **** **** **** </p>
            </a>
          </li>
        <li>
          <a href="/#/alipay" >
            <img src="../../static/icons/alipay.png" alt="">
            <h3>{{ $t('ProfileDetailPage.wdzfb') }}</h3>
            <p> **** **** **** </p>
          </a>
        </li>
        <li>
          <a href="/#/more_info" >
            <img src="../../static/icons/profile/p-head.png" alt="">
            <h3>{{ $t('ProfileDetailPage.wdxxxx') }}</h3>
            <p>{{user.realname}}</p>
          </a>
        </li>
          <li @click="handleClickChangePwd">
            <a>
              <img src="../../static/icons/profile/p-pass.png" alt="">
              <h3>{{ $t('ProfileDetailPage.mmgl') }}</h3>
              <p></p>
            </a>
          </li>
          <li >
            <a href="/#/paypassword">
              <img src="../../static/icons/profile/pay_passwrod.png" alt="">
              <h3>{{ $t('ProfileDetailPage.szzfmm') }}</h3>
              <p></p>
            </a>
          </li>
        <!--li @click="handleClickDel">
          <a>
            <img src="../../static/icons/del.png" alt="">
            <h3 style="color:red">{{ $t('ProfileDetailPage.sczh') }}</h3>
            <p></p>
          </a>
        </li-->
      </ul>
    </div>
    <nut-popup :overlay="false" position="bottom" closeable close-icon="cross" v-model="showChangePwd" close-icon-position="top-right" :style="{height:'40%' }">
      <div style="padding:1.3rem 0.3rem">
        <nut-row>
          <nut-col :span="24">
            <nut-textinput
              :placeholder="this.$t('ProfileDetailPage.qsrxdmm')"
              v-model="newPassword"
              label=""
              type="password"
            />
          </nut-col>
        </nut-row>
        <nut-row style="margin-top:0.6rem;">
          <nut-col :span="8">
            <nut-button
              @click="handleClickUpdatePwd"
              type="light"
            >{{ $t('ProfileDetailPage.bc') }}
            </nut-button>
          </nut-col>
        </nut-row>
      </div>
    </nut-popup>
    <nut-popup v-model="showPhotoBox" position="left" :style="{height:'100%' }">
      <ul class="headphoto-box">
        <li v-for="item in headphotoArr">
          <img :src="item" alt="" @click="handleClickSelPhoto(item)">
        </li>
      </ul>
    </nut-popup>
    <MainNav nav_index="4" ref="main_nav"/>
  </div>
</template>

<script>
import MainNav from "../components/MainNav";
import TopNav from "../components/TopNav";
import helper from "../utils/helper";

export default {
  name: 'ProfileDefailPage',
    components: {MainNav,TopNav},
    data () {
    return {
        loading:false,
        curr_img:'',
        showImgReview:false,
        hasHeadphotoLoaded: false,
        user:{},
        showPhotoBox: false,
        showChangePwd: false,
        newPassword: '',
        defaultPhoto:'/static/img/headphoto/1.1.jpg',
        headphotoArr:[
            "/static/img/headphoto/1.1.jpg",
            "/static/img/headphoto/1.2.jpg",
            "/static/img/headphoto/2.0.jpg",
            "/static/img/headphoto/1.4.jpg",
            "/static/img/headphoto/1.5.jpg",
            "/static/img/headphoto/1.6.jpg",
            "/static/img/headphoto/1.7.jpg",
            "/static/img/headphoto/1.8.jpg",
            "/static/img/headphoto/1.9.jpg",
            "/static/img/headphoto/2.1.jpg",
            "/static/img/headphoto/2.2.jpg",
            "/static/img/headphoto/2.3.jpg",
            "/static/img/headphoto/2.5.jpg",
        ],
        user_data:{
            realname:'',
            id_card:'',
            nickname:'',
            img_qrcode:'',
            img_card1:'',
            img_card2:'',
            file_qrcode:'',
            file_card1:'',
            file_card2:'',
        },
    }
  },
    methods:{
        handleClickChangePwd(){
            this.showChangePwd = true;
        },
        handleClickUpdatePwd(){
            this.showChangePwd = false;
            if(this.newPassword){
                this.$axios.post(this.$api_url.update_pwd,this.$qs.stringify({
                    val:this.newPassword
                })).then((res)=>{
                    if(res.data.code === 0){
                        this.$toast.success(res.data.msg);
                    } else{
                        this.$toast.fail(res.data.msg);
                    }
                })
            }
        },
        shiftTab(index){

        },

        handleClickDel(){
            this.isVisible = true;
            this.$dialog2.confirm({
                title: this.$t('ProfileDetailPage.wts'),
                message: '删除后将从你的记录里消失，无法找回?',
            })
              .then(() => {
                  this.$axios.post(this.$api_url.delete_user,this.$qs.stringify({
                      id:1
                  })).then((res)=>{
                      if(res.data.code === 0){
                          this.$toast.success(res.data.msg);
                          helper.forgetToken();
                      } else{
                          this.$toast.fail(res.data.msg);
                      }
                  })
              })
              .catch(() => {
                  // on cancel
              });
        },
        uploadQrcode(args){
            this.user_data.file_qrcode = args.msg[0];
        },
        uploadIdCard1(args){
            this.user_data.file_card1 = args.msg[0];
        },
        uploadIdCard2(args){
            this.user_data.file_card2 = args.msg[0];
        },
        handleClickSave(){
            if(this.user_data.realname != "" ||
                this.user_data.id_card != "" ||
                this.user_data.nickname != "" ||
                this.user_data.file_qrcode != "" ||
                this.user_data.file_card1 != "" ||
                this.user_data.file_card2 != ""
            ){
                this.loading = true;
                let param = new FormData();
                param.append("realname",this.user_data.realname);
                param.append("nickname",this.user_data.nickname);
                param.append("id_card",this.user_data.id_card);
                param.append("file_qrcode",this.user_data.file_qrcode);
                param.append("file_card1",this.user_data.file_card1);
                param.append("file_card2",this.user_data.file_card2);
                this.$axios.post(this.$api_url.save_profile_detail,param,{
                    headers: { "Content-Type": "multipart/form-data" }
                }).then((res)=>{
                    if(res.data.code === 0){
                        this.$toast.success(res.data.msg);
                        this.getData();
                    } else{
                        this.$toast.fail(res.data.msg);
                    }
                }).catch((err)=>{
                    this.$toast.fail(err.message);
                }).then(()=>{
                    this.loading = false
                })
            }
        },
        handleClickHeadphoto(){
            this.showPhotoBox = true;
        },
        handleClickSelPhoto(val){
            this.showPhotoBox = false;
            this.user.headphoto = val;
            this.$axios.post(this.$api_url.save_headphoto,this.$qs.stringify({
                url:val
            })).then((res)=>{
            })
        },
        getData(){
            this.$axios.get(this.$api_url.user).then((res)=>{
                let data = res.data;
                this.hasHeadphotoLoaded = true
                this.user = data;
                this.user_data.nickname = data.nickname;
                this.user_data.realname = data.realname;
                this.user_data.id_card = data.id_card;
                this.user_data.img_card1 = data.img_card1;
                this.user_data.img_card2 = data.img_card2;
                this.user_data.img_qrcode = data.img_qrcode;
            })
        },
        handleClickReview(url){
            this.curr_img = url;
            this.showImgReview = true;
        },
        handleClickCloseReview(){
            this.showImgReview = false;
        },
    },
    mounted() {
      this.getData();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #app{
    margin-top:0;
  }
  .Personal_ul{
    padding: 0 .4rem;
  }
  .Personal_ul li{
    overflow: hidden;
    border-bottom: .013333rem solid #eee;
    padding-right: .4rem;
    background: url(/static/icons/point-right.png) no-repeat 100%;
    background-size: auto .32rem;
  }
  .Personal_ul li img{
    float: left;
    width: .48rem;
    margin: .48rem .08rem 0 0;
  }
  .Personal_ul li h3{
    float: left;
    font-size: .44rem;
    line-height: 1.466667rem;
    color: #333;
  }
  .Personal_ul li .Personal_ul_r_img{
    float: right;
    width: 1.2rem;
    height: 1.2rem;
    margin: .133333rem .48rem 0 0;
  }
  .Personal_ul li p{
    float: right;
    font-size: .32rem;
    line-height: 1.466667rem;
    color: #999;
  }
  .headphoto-box{
    padding:0.6rem;
    text-align: center;
  }
  .headphoto-box::-webkit-scrollbar {
    display:none
  }
  .headphoto-box img{
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    border: thin solid #ccc;
  }
</style>
